<template>
  <div>
      <!-- 头部返回 -->
    <div class="header">
      <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)"/>
    </div>
    <!-- 发送验证码 -->
    <div class="test">
      <van-cell-group inset>
    <van-field
    v-model="sms"
    center
    clearable
    label="短信验证码"
    placeholder="请输入短信验证码"
    @input="changecode"
  >
    <template #button>
      <van-button size="small" type="primary" @click="sendsms" >发送验证码</van-button>
    </template>
  </van-field>
</van-cell-group>
    </div>
    <!-- 提交按钮 -->
 <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" @click="surecode" :disabled="isdisabled">下一步</van-button>
  </div>
  </div>
</template>

<script setup lang="ts">
import{ref} from 'vue'
import {useRouter} from "vue-router"
// 引入pinia
import {useuserstore} from "../../store/userstore"
// 引入获取验证码
import{telcode,testcode} from "../../api/user"
const sms=ref("")
const tcode=ref("")
const isdisabled=ref(true)
const userstore =useuserstore()
const router=useRouter()
let {tel}=userstore
 const changecode =()=>{
   console.log(sms.value);
   if(sms.value.length==5){
     isdisabled.value=false
   }
 }
//  定义验证码类型
interface bb{
  tel:string
}
// 点击发送验证码
const sendsms=()=>{
  // 获取验证码参数
  const value1:bb={
   tel:tel,
   }
  //  console.log(value1);
    telcode(value1).then((res:any)=>{
       tcode.value=(res.data).toString()
      //  console.log(tcode.value);
    })
}

// 定义参数类型
interface aa{
  tel:string,
  telcode:string
}
// 点击下一步调用接口
const surecode=()=>{
  // 定义参数
   const value1:aa={
   tel:tel,
   telcode:sms.value
   }
  //  console.log(value1);
    testcode(value1).then((res:any)=>{
      if(res.code==200){
       router.push("/register/step3")
      }
    
      // console.log(res);
    })
 }
</script>
<style scoped>

</style>